<template>
  <div id="main" v-loading="loading">
    <div class="box-card   boxBlock" v-if="userInfo" style="margin-top: 0;">
      <div  class="dialogItem" v-if="userInfo.userType != '00'"> 
        <span>我的信息</span> 
      </div>
      

      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="更新信息" name="first"> 
          <el-form
            class="padding-r35"
            label-width="200px"
            label-position="right"
            :model="userInfo"
            ref="userInfo1"
            :rules="regFormRulesU1"
            v-if="userInfo"
            style="margin:20px 0;width:500px"
          >
          <el-form-item label="用户:" prop="userName">
            <el-input v-model="userInfo.userName"  :disabled="userInfo.userType == '00'||userInfo.userType == '03'" disabled></el-input>
          </el-form-item>
          <el-form-item label="手机号:"  > 
            <el-input v-model="userInfo.phonenumber" :disabled="userInfo.userType == '00'||userInfo.userType == '03'"></el-input>
          </el-form-item>
    
          <el-form-item label="是否为代理商:"   v-if="userInfo.agent">
              是<el-tooltip class="item" effect="dark" content="复制链接注册会员后成为该客户的下级客户" placement="top">
                    <el-button
                      size="mini" plain 
                      v-copy="`${hostname}#/register?invitationCode=${userInfo.userId}`"  
                      style="margin-left: 10px; color:#fff" type="primary"  
                    >
                    复制
                  </el-button>
                </el-tooltip> 
                </el-form-item> 
                <el-form-item
                  v-if="userInfo.userType != '00'"
                  label="收款码:"
                
                  prop="receivingCode"
                >
                  <el-input v-model="userInfo.receivingCode" disabled></el-input>
                </el-form-item>
                
                <el-form-item 
                  label="邮箱:"
                
                  prop="email"
                >
                  <el-input
                    v-model="userInfo.email"
                    placeholder="xxxx@xxxx."
                  ></el-input>
                </el-form-item>
                <el-form-item label="修改密码:" prop="password">
                  <el-input
                    type="password"
                    placeholder="修改密码"
                    v-model="userInfo.password"
                    show-password
                  ></el-input>
                </el-form-item>  
                <el-form-item label="再次输入修改密码:" prop="password2">
                  <el-input
                    type="password"
                    placeholder="再次输入修改密码"
                    v-model="userInfo.password2"
                    show-password
                  ></el-input>
                </el-form-item>  
                <el-form-item class="wid-8 aline-c">
                  <el-button type="primary" @click="referU" >
                    确定修改 
                  </el-button> 
            </el-form-item>
           </el-form>
        </el-tab-pane>
        <el-tab-pane label="其他信息" name="second">
          <el-form
            class="padding-r35"
            label-width="200px"
            label-position="right"
            :model="userInfo"
            ref="userInfo"
            :rules="regFormRulesU"
            v-if="userInfo"
            style="margin:20px 0;width:500px"
          >
          <el-form-item 
            label="性别:" 
            prop="sex"
          >
            <el-radio-group v-model="userInfo.sex">
              <el-radio label="0">男</el-radio>
              <el-radio label="1">女</el-radio>
            </el-radio-group>
          </el-form-item>

          <div >
            <el-form-item label="账户名称:" prop="bankAccountName">
              <el-input v-model="userInfo.bankAccountName"></el-input>
            </el-form-item>
            <el-form-item label="银行卡号:" prop="bankCardNumber">
              <el-input v-model="userInfo.bankCardNumber"></el-input>
            </el-form-item>
            <el-form-item label="开户行名称:" prop="bankName">
              <el-input v-model="userInfo.bankName"></el-input>
            </el-form-item>
          </div> 
          <el-form-item class="wid-8 aline-c">
              <el-button type="primary" @click="editUserInfoClick"  >
                更新信息
              </el-button> 
            </el-form-item>
          </el-form>
        </el-tab-pane>
 
      </el-tabs> 


      </el-form>
    </div>
    <codeChoose ref="codeRef" :fromType="verType" @setParam="getParam"></codeChoose>
  </div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
import codeChoose from '@/components/codeChoose.vue'
import {
  setStoreS,
  getStoreS,
  removeStoreS,
  insertCharacter,
  phoneReg,
  emailReg,
} from "../../utils/util";
import {
  baseURL,
  req,
  service,
  encrypt,
  decrypt,
  reqtoken,
  reqField,
  reqJson
} from "../../api/axiosFun";
var validbankName = (rule, value, callback) => {
  var myreg = /^[\u4e00-\u9fa5]{4,20}$/;
  if (!myreg.test(value)) {
    return callback(new Error("请输入正确的开户行名称，如XX银行XX支行"));
  }
  if (!value.includes("银行")) {
    return callback(new Error("请输入正确的开户行名称，如XX银行XX支行"));
  }
  if (!value.includes("支行")) {
    return callback(new Error("请输入正确的开户行名称，如XX银行XX支行"));
  }
  return callback();
};
export default {
  data() {
    return {
      userInfo: null,
      baseURL: baseURL,
      loading: false,
      disabledU: false,
      userInfo1:null,
      regFormRulesU1: {
        userName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        email: [
          {
            pattern: emailReg,
            required: false,
            message: "请输入正确的邮箱",
            trigger: "blur",
          },
        ],
        phonenumber: [
          {
            required: true,
            message: "请输入手机号",
            trigger: ["blur", "change"],
          },
          {
            pattern: phoneReg,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],

      },
      regFormRulesU: { 
        
        bankAccountName: [
          { required: true, message: "请输入账户名称", trigger: "blur" },
          {
            pattern: /^[\u4e00-\u9fa5]{2,8}$/,
            message: "请输入正确的账户名称",
            trigger: "blur",
          },
        ],
        bankCardNumber: [
          { required: true, message: "请输入银行卡号", trigger: "blur" },
          {
            // pattern: /^\d{16}|\d{19}$/,
            pattern: /^([1-9]{1})(\d{15}|\d{16}|\d{18})$/,
            message: "请输入正确的银行卡号",
            trigger: "blur",
          },
        ],
        bankName: [
          { required: true, message: "请输入开户行名称", trigger: "blur" },
          { validator: validbankName },
        ],
      },
       hostname:"https://dev.novalinkpay.com/" ,
      //  hostname: 'https://vip.novalinkpay.com/', 
      verArry:[],
      verType:'',
      curItem:'', 
      userInfo: null,
      fd:'',
      headers:'',
      activeName: 'first'
    };
  },
  components: { 
    codeChoose
  },
  created() {  
    if (this.$store.state.user) {
      this.userInfo = JSON.parse(this.$store.state.user); 
    } 
    this.getInfo();
  },
  computed: {
    ...mapGetters(["getUser"]),
    ...mapGetters(["getcInfo"]),
  },
  watch: {
    getUser(newVal) {
      this.userInfo = JSON.parse(newVal);
    },
  },
  methods: {
    handleClick(tab, event) { 
      },
    getInfo() {
      service
        .get("/api/photon/getUserInfo", {})
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.userInfo = res.data;
            this.$store.commit("user", JSON.stringify(res.data));
            if(this.userInfo&&this.userInfo.verifyApi){
              this.verArry =  this.userInfo.verifyApi.split(',');
            } 
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    getParam(val,type){   
      this.headers = val ;  
       if(type=='update'){
        this.params = val ;  
        this.editUserInfoVer();
      }else{
        this.referUShowPwd();
      } 
    },  
    referUShowPwd(){
      reqJson('post',"/api/photon/editSensitiveInfo",{ 
        email:this.userInfo.email,
        password:this.userInfo.password3,
        phonenumber:this.userInfo.phonenumber, 
      },{
          headers:{
            ...this.headers
          }
        })    
        .then((res) => {
          this.disabledU = false;
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.getInfo();
          } else {
            this.userInfo.password = "";
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    referU() {
      this.$refs.userInfo1.validate((valid) => {
        if (!valid) return;   
        if(!this.userInfo.phonenumber && !this.userInfo.email){
            return this.$message.error('手机号和邮箱必填一项！', "PhotonPay", "");
        }
        if(this.userInfo.password2!=this.userInfo.password&&this.userInfo.password){
          return  this.$message({
              type: "error",
              message: '两次密码不一致',
            });
        } 
        if(this.userInfo.password&&this.userInfo.password.length<6){
          return this.$message({
              type: "error",
              message: '密码不能少于6位',
          });
        }
        if (this.userInfo.password) { 
          this.userInfo.password3 = encrypt(this.userInfo.password);
        } else {
          
        }
 
        this.disabledU = true;
        this.$refs.codeRef.openDialog(); 
        this.verType = 'add'
  
      });
    },

    editUserInfoVer(){   
        reqJson('post',"/api/photon/editUserInfo",{ 
            bankAccountName:this.userInfo.bankAccountName,
            bankCardNumber:this.userInfo.bankCardNumber,
            bankName:this.userInfo.bankName, 
            sex:this.userInfo.sex
        },{
            headers:{
              ...this.headers
            }
          })    
          .then((res) => {
            this.disabledU = false;
            if (res.code == 0) {
              this.$message({
                type: "success",
                message: res.msg,
              });
              this.getInfo();
            } else {
              this.userInfo.password = "";
              this.$message({
                type: "info",
                message: res.msg,
              });
            }
          })
          .catch((err) => {
            this.$message.error(err);
          });

    },

    editUserInfoClick() {
      this.$refs.userInfo.validate((valid) => {
        if (!valid) return;   
        this.verType = 'update'; 
        if(this.verArry.includes('/api/photon/editUserInfo')){
            this.$refs.codeRef.openDialog();  
          }else{ 
            this.editUserInfoVer();
          } 
          this.disabledU = true;  
  
      }); 
      
    }, 

  },
  directives: {
    // 注册一个复制指令
    copy: {
      bind(el, { value }) {
        el.handler = () => {
          if (!value) {
            console.error('需要复制的内容不能为空'); 
            return;
          }
          const input = document.createElement('input');
          input.value = value;
          document.body.appendChild(input);
          input.select();
          document.execCommand('copy');
          document.body.removeChild(input);
          alert('复制成功！') 
        }; 
        el.addEventListener('click', el.handler);
      },
      unbind(el) {
        el.removeEventListener('click', el.handler);
      },
    },
  },
};
</script>

<style scoped>
.el-tabs__item.is-active{
  color: #2e3094;
}
#main .box-card .el-form-item {
  /* display: inline-block; */
  /* margin-left: 5%; */
}
.box-card h2 {
  margin: 0;
}
.box-card .item .item-name {
  font-size: 35px;
  line-height: 80px;
}
.box-card .item .item-ts {
  font-size: 12px;
  font-weight: 500;
  color: #949494;
}
.el-upload .avatar {
  margin-left: -15px;
  margin-top: -15px;
  width: 180px;
  height: 180px;
  display: block;
}
.el-image {
  margin-top: 20px;
  width: 180px;
  height: 180px;
}
</style>
